﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/charts/Chart.js"></script>
    <script src="~/Content/js/echarts/echarts.common.min.js"></script>
    <script>
        $(function () {
            GetSalaryChart();
            GetSalaryChart1();
            getCountData();
            GetConsumeTop();
            GetTuiJianTop();
        });

        function getCountData() {
            $.ajax({
                type: 'post',
                url: '/Home/GetDataCountForSystem',
                dataType: "json",
                async: true,
                success: function (data) {
                    //alert(data.monthMoney);
                    //$('#memberCount').html(data.memberCount);
                    $('#memberCount').html(data.allMoney);
                    //$('#newMemberCount').html(data.newMemberCount);
                    $('#newMemberCount').html(data.tixianMoney);
                    $('#orderCount').html(data.orderCount);
                    $('#monthMoney').html(data.monthMoney);
                   // $('#allMoney').html(data.allMoney);
                }
            });
        }

        function GetSalaryChart() {
            var $chart = echarts.init(document.getElementById('salarychart'));
            $chart.showLoading();
            var option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 40,
                    borderWidth: 1
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                series: [
                    {
                        name: '日销售总额',
                        type: 'line',
                        data: []
                    }
                ]
            };
            $chart.setOption(option);
            var date = new Date();
            var endDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            date.setDate(date.getDate() - 19);
            var startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            $.ajax({
                async: true,
                url: "/Home/GetMoneyChartJson",
                data: { startTime: startDate, endTime: endDate },
                success: function (result) {
                    var data = eval('(' + result + ')');
                    var dataNew = [];
                    for (var i = 0; i < data.length; i++) {
                        dataNew.push([data[i].dateTime, data[i].newMoney]);
                    }
                    $chart.hideLoading();
                    $chart.setOption({
                        series: [
                            {
                                data: dataNew
                            }
                        ]
                    });
                }
            });
        }

        function GetSalaryChart1() {
            var $chart = echarts.init(document.getElementById('salarychart1'));
            $chart.showLoading();
            var option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 40,
                    borderWidth: 1
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                series: [
                    {
                        name: '新增会员数量',
                        type: 'line',
                        data: []
                    }
                ]
            };
            $chart.setOption(option);
            var date = new Date();
            var endDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            date.setDate(date.getDate() - 14);
            var startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            $.ajax({
                async: true,
                url: "/Home/GetMemberChartJson",
                data: { startTime: startDate, endTime: endDate },
                success: function (result) {
                    var data = eval('(' + result + ')');
                    var dataNew = [];
                    for (var i = 0; i < data.length; i++) {
                        dataNew.push([data[i].dateTime, data[i].memberCount]);
                    }
                    $chart.hideLoading();
                    $chart.setOption({
                        series: [
                            {
                                data: dataNew
                            }
                        ]
                    });
                }
            });
        }

        function GetConsumeTop() {
            var $shopTop = $('#consumeTop');
            $.ajax({
                type: 'post',
                url: '/Home/GetConsumeTop',
                dataType: 'json',
                async: false,
                beforeSend: function () {
                    $shopTop.html('<li>正在加载数据......</li><span class="time"></span>');
                },
                success: function (json) {
                    setTimeout(function () {
                            var _html = '';
                            for (var i = 0, len = json.length; i < len; i++)
                                _html += '<li><a href="#">' +
                                    json[i].F_Consignee +
                                    '</a><span class="time">' +
                                    json[i].F_TotalMoney +
                                    '元</span></li>';
                            $shopTop.html(_html);
                        },
                        2000);
                }
            });
        }
        function GetTuiJianTop()
        {
            var $shopTop = $('#tujianTop');
            $.ajax({
                type: 'post',
                url: '/Home/GetTuiJianTop',
                dataType: 'json',
                async: false,
                beforeSend: function () {
                    $shopTop.html('<li>正在加载数据......</li><span class="time"></span>');
                },
                success: function (json) {
                    setTimeout(function () {
                        var _html = '';
                        for (var i = 0, len = json.length; i < len; i++)
                            _html += '<li><a href="#">' +
                                json[i].F_Consignee +
                                '</a><span class="time">推广人数：' +
                                json[i].F_TotalCount +
                                '人</span><span class="time">有效会员' +
                                json[i].F_Huiyuan +
                                '人</span></li>';
                        $shopTop.html(_html);
                    },
                        2000);
                }
            });
        }

        
    </script>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>关键数据实时指标
                    <div style="float: right; position: relative; top: -4px; right: 0px;">
                        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="dashboard-stats" style="width:25%;">
                        <div class="dashboard-stats-item" style="background-color: #fc8675;">
                            <h2 class="m-top-none" id="memberCount">-</h2>
                            <h5>销售总金额</h5>
                            <div class="stat-icon">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats" style="width:25%;">
                        <div class="dashboard-stats-item" style="background-color: #949FB1;">
                            <h2 class="m-top-none" id="newMemberCount">-</h2>
                            <h5>提现总金额</h5>
                            <div class="stat-icon">
                                <i class="fa fa-group fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats" style="width:25%;">
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none" id="orderCount">-</h2>
                            <h5>本月订单总数量</h5>
                            <div class="stat-icon">
                                <i class="fa fa-truck fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats" style="width:25%;">
                        <div class="dashboard-stats-item" style="background-color: #f3ce85;">
                            <h2 class="m-top-none" id="monthMoney">-</h2>
                            <h5>本月销售总金额</h5>
                            <div class="stat-icon">
                                <i class="fa fa-jpy fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    
                    @*<div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;">
                            <h2 class="m-top-none" id="allMoney">268</h2>
                            <h5>平台销售总金额</h5>
                            <div class="stat-icon">
                                <i class="fa fa-jpy fa-3x"></i>
                            </div>
                        </div>
                    </div>*@
                </div>
            </div>
        </div>

        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 69%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>近20天日销售额
                        </div>
                        <div class="panel-body" style="padding-bottom: 0px;">
                            <div id="salarychart" style="height: 300px; width: 100%; padding-right: 10px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 300px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>本月推荐排行</div>
                        <div class="panel-body">
                            <ul id="tujianTop"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            
            <div style="float: left; width: 69%;">
                <div style="height: 300px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>近15天日代理商新增数量
                        </div>
                        <div class="panel-body" style="padding-bottom: 0px;">
                            <div id="salarychart1" style="height: 250px; width: 100%; padding-right: 10px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            

            
            <div style="float: right; width: 30%;">
                <div style="height: 300px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-send fa-lg" style="padding-right: 5px;"></i>本月消费排行</div>
                        <div class="panel-body">
                            <ul id="consumeTop">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 105px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 1.1;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 30px;
                opacity: .3;
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px 10px;
            }

            .panel-default > .panel-body {
                padding: 10px;
                padding-bottom: 0px;
            }

                .panel-default > .panel-body ul {
                    overflow: hidden;
                    padding: 0;
                    margin:0px;margin-top: -5px;
                }

                    .panel-default > .panel-body ul li {
                        line-height: 27px;
                        list-style-type: none;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                        .panel-default > .panel-body ul li .time {
                            color: #a1a1a1;
                            float: right;
                            padding-right: 5px;
                        }
    </style>
</body>
</html>
